<template>
  <div class="setting-wrap">
    <div class="setting-side">
      <a-menu
          :default-selected-keys="[1]"
          mode="inline"
          @click="handleMenuClick"
      >
        <a-menu-item :key="1">
          <a-icon type="pie-chart"/>
          <span>选择数据库连接</span>
        </a-menu-item>
        <a-menu-item :key="2">
          <a-icon type="desktop"/>
          <span>命名空间管理</span>
        </a-menu-item>
      </a-menu>
    </div>
    <DbManage @load="$emit('load')" v-if="menuSelectKey === 1"/>
    <NameSpaceManage @load="$emit('load')" v-if="menuSelectKey === 2"/>
  </div>
</template>

<script>

import DbManage from '@/components/DbManage.vue'
import NameSpaceManage from '@/components/NameSpaceManage.vue'

export default {
  name: "Setting",
  components: {
    DbManage,
    NameSpaceManage,
  },
  data() {
    return {
      menuSelectKey: 1,
    }
  },
  methods: {
    handleMenuClick({ item, key, keyPath }) {
      console.log(key)
      this.menuSelectKey = key
    }
  }
}
</script>

<style lang="less" scoped>

.setting-wrap {
  width: 100%;
  height: 300px;
  display: flex;

  .setting-side {
    width: 240px;
  }

}

</style>